@import "compass/css3";

@import url(http://fonts.googleapis.com/css?family=Lato:400,900|Montez);

$buttonBackground: #2c3e50;
$buttonColor: rgba(255,255,255,1);

.sparkley {

  background: lighten( $buttonBackground , 10% );
  color: $buttonColor;
  border: none;

  padding: 16px 36px;
  font-weight: normal;
  
  border-radius: 3px;
  transition: all 0.25s ease;
  
  box-shadow: 0 38px 32px -23px black;
  margin: 0 1em 1em;
  
  &:hover {
   
    background: $buttonBackground;
    color: transparentize( $buttonColor,0.8 );
    
  }
  
}





html  {
  
  font-family: Lato;
  font-weight: 200;
  font-size: 1em;
  text-align: center;
  color: #ddd;
  
  min-height: 100%;

  // awesome background from: http://codepen.io/bosscause/pen/BkxbC <3
  
  background: #092756;
  background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
  background: -o-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
  background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
  background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(35, 24, 82, 0.22) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
  
  body { 
    padding: 50px;
  }

}

h1,h2,h3 { 
  
  span { 
    font-family: Montez; 
    font-size: 1.9em; 
    font-weight: 300; 
    margin: 0 0.3em; 
    color: #ff0080; 
  }
  
}

h1 { 
  font-size: 1.9em; 
  width: 900px; 
  margin: 0 auto 1em; 
  text-shadow: 0 2px 1px black;
}

.img {

  margin: 40px auto 0;
  width: 500px;
  display: block;
  
  img { 
    width: 100%; 
    border-radius: 5px;
  }

}

p {

  padding: 5px 10px;
  display: inline-block;
  margin: 10px auto;

}